import React, { useState } from 'react'
import { useLocation } from 'react-router-dom'
import { ListItemState } from '../../store/quest/requestion'
import { Checkbox } from 'react-vant'
const Index: React.FC = () => {
	const location = useLocation()
	const v = location.state as ListItemState

	const [activeIndex, setActiveIndex] = useState(0);

	const [awserList, setAwserList] = useState<Array<number | number[]>>(new Array(v.question.length).fill(-1))

	const changeRadio = (i: number) => {
		const list = [...awserList]
		list[activeIndex] = i
		setAwserList(list)
		setActiveIndex(activeIndex + 1)
	}

	const changeCheck = (arr: number[]) => {
		const list = [...awserList]
		list[activeIndex] = arr
		setAwserList(list)
	}

	const nextQuest = () => {
		setActiveIndex(activeIndex + 1)
	}

	if (activeIndex >= v.question.length) {
		return <>
			<div>
				<h1>已做</h1>

				<h1>未做</h1>
				{
					awserList.map((v, i) => {
						if (v === -1) {
							return <b key={i} onClick={ () => setActiveIndex(i) }>第{i + 1}题</b>
						}
					})
				}
			</div>
		</>
	}

	return (
		<div>
			<ul>
				{
					v.question.map((v, index) => {
						return <li key={index} style={{ display: index === activeIndex ? 'block' : 'none' }}>
							{
								v.type === '单选'
									?
									<>
										<h3>第{index + 1}题-{v.title}--{v.type}</h3>
										{
											v.selects.map((v, i) => {
												return <h4 key={i} onClick={() => changeRadio(i)}>
													<input type="radio" name={(index + 1).toString()} />
													<span>{i + 1}-{v}</span>
												</h4>
											})
										}
									</>
									:
									<>
										<h3>第{index + 1}题-{v.title}--{v.type}</h3>

										<Checkbox.Group onChange={(v) => changeCheck(v)}>
											{
												v.selects.map((v, i) => {
													return <h4 key={i}>
														<Checkbox name={i} />
														<span>{i + 1}-{v}</span>
													</h4>
												})
											}
										</Checkbox.Group>


										<button onClick={() => nextQuest()}>下一题</button>
									</>
							}
						</li>
					})
				}
			</ul>

			<div>
				{
					awserList.map((v, i) => {
						return <p key={i}>第{i + 1} 答案 {v}</p>
					})
				}
			</div>
		</div>
	)
}

export default Index